<template>
  <div class="map-container">
    <div id="map" ref="mapContainer"></div>
    <div class="control-panel">
      <button @click="addPopup">添加普通弹窗</button>
      <button @click="addHtmlPopup">添加HTML弹窗</button>
      <button @click="addDynamicPopup">添加动态弹窗</button>
      <button @click="clearAllPopups">清除所有弹窗</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { setMapInstance } from '@/utils/mapUtils'

const mapContainer = ref<HTMLElement | null>(null)
let map: mapboxgl.Map | null = null
const popups: mapboxgl.Popup[] = []

const initMap = () => {
  if (!mapContainer.value) return
  
  mapboxgl.accessToken = import.meta.env.VITE_APP_MAP_TOKEN
  
  map = new mapboxgl.Map({
    container: mapContainer.value,
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.397428, 39.90923], // 北京坐标
    zoom: 12
  })

  setMapInstance(map)
}

// 添加普通弹窗
const addPopup = () => {
  if (!map) return
  
  const popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat([116.397428, 39.90923])
    .setText('这是一个普通的弹窗')
    .addTo(map)
  
  popups.push(popup)
}

// 添加HTML弹窗
const addHtmlPopup = () => {
  if (!map) return
  
  const htmlContent = `
    <div style="padding: 10px;">
      <h3 style="margin: 0 0 10px 0;">HTML弹窗</h3>
      <p style="margin: 0;">这是一个包含HTML内容的弹窗</p>
    </div>
  `
  
  const popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat([116.407428, 39.90923])
    .setHTML(htmlContent)
    .addTo(map)
  
  popups.push(popup)
}

// 添加动态弹窗
const addDynamicPopup = () => {
  if (!map) return
  
  const popup = new mapboxgl.Popup({
    closeOnClick: false,
    className: 'dynamic-popup'
  })
    .setLngLat([116.387428, 39.90923])
    .setHTML('<div id="dynamic-content">加载中...</div>')
    .addTo(map)
  
  // 模拟异步数据加载
  setTimeout(() => {
    const content = document.getElementById('dynamic-content')
    if (content) {
      content.innerHTML = `
        <div style="padding: 10px;">
          <h3 style="margin: 0 0 10px 0;">动态弹窗</h3>
          <p style="margin: 0;">数据已加载完成！</p>
          <div style="margin-top: 10px;">
            <span>当前时间：${new Date().toLocaleTimeString()}</span>
          </div>
        </div>
      `
    }
  }, 1000)
  
  popups.push(popup)
}

// 清除所有弹窗
const clearAllPopups = () => {
  popups.forEach(popup => popup.remove())
  popups.length = 0
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  clearAllPopups()
  map?.remove()
  map = null
})
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

button {
  padding: 8px 16px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background: #34495e;
}

/* 自定义弹窗样式 */
:global(.mapboxgl-popup-content) {
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

:global(.dynamic-popup .mapboxgl-popup-content) {
  background: #f8f9fa;
}
</style> 